<!--
 * @description: 抽离开源版本
 * @Author: chuyinlong
 * @Date: 2021-08-20 17:29:06
 * @LastEditors: chuyinlong
 * @LastEditTime: 2021-08-27 14:24:01
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico"
    type="image/x-icon" />
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>

<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>

      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1447848" target="_blank"
        class="nav-more">查看项目</a>

    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
        <ul class="icon_lists dib-box">

          <li class="dib">
            <span class="icon iconfont">&#xe790;</span>
            <div class="name">添加-方框-填充</div>
            <div class="code-name">&amp;#xe790;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6b2;</span>
            <div class="name">扫码</div>
            <div class="code-name">&amp;#xe6b2;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6b5;</span>
            <div class="name">删除</div>
            <div class="code-name">&amp;#xe6b5;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe787;</span>
            <div class="name">110导航、地址、位置</div>
            <div class="code-name">&amp;#xe787;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6b6;</span>
            <div class="name">编辑</div>
            <div class="code-name">&amp;#xe6b6;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6b7;</span>
            <div class="name">微信</div>
            <div class="code-name">&amp;#xe6b7;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe642;</span>
            <div class="name">解除绑定</div>
            <div class="code-name">&amp;#xe642;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe622;</span>
            <div class="name">地址</div>
            <div class="code-name">&amp;#xe622;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe607;</span>
            <div class="name">个人中心-地址管理</div>
            <div class="code-name">&amp;#xe607;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe64a;</span>
            <div class="name">tijiaodingdan-youhuiquan</div>
            <div class="code-name">&amp;#xe64a;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe64b;</span>
            <div class="name">tijiaodingdan-weixin</div>
            <div class="code-name">&amp;#xe64b;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe64c;</span>
            <div class="name">weigouxuan</div>
            <div class="code-name">&amp;#xe64c;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe64d;</span>
            <div class="name">tijiaodingdan-yu e</div>
            <div class="code-name">&amp;#xe64d;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe64e;</span>
            <div class="name">tuanzhanggongzuotai</div>
            <div class="code-name">&amp;#xe64e;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe64f;</span>
            <div class="name">daijiesuanyongjin</div>
            <div class="code-name">&amp;#xe64f;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe650;</span>
            <div class="name">daifukuan</div>
            <div class="code-name">&amp;#xe650;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe651;</span>
            <div class="name">wodeyouhuiquan</div>
            <div class="code-name">&amp;#xe651;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe652;</span>
            <div class="name">wodekefu</div>
            <div class="code-name">&amp;#xe652;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe653;</span>
            <div class="name">tuanzhangxinxi</div>
            <div class="code-name">&amp;#xe653;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe654;</span>
            <div class="name">gouxuan</div>
            <div class="code-name">&amp;#xe654;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe655;</span>
            <div class="name">jifen</div>
            <div class="code-name">&amp;#xe655;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe656;</span>
            <div class="name">gouwuche-shanchu</div>
            <div class="code-name">&amp;#xe656;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe657;</span>
            <div class="name">huiyuan</div>
            <div class="code-name">&amp;#xe657;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe658;</span>
            <div class="name">kefu</div>
            <div class="code-name">&amp;#xe658;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe659;</span>
            <div class="name">juxing</div>
            <div class="code-name">&amp;#xe659;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe65a;</span>
            <div class="name">lingquanzhongxin</div>
            <div class="code-name">&amp;#xe65a;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe65b;</span>
            <div class="name">liebiao</div>
            <div class="code-name">&amp;#xe65b;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe65c;</span>
            <div class="name">pingjiazhongxin</div>
            <div class="code-name">&amp;#xe65c;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe65d;</span>
            <div class="name">peisongzhong</div>
            <div class="code-name">&amp;#xe65d;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe65e;</span>
            <div class="name">pingjiaxingxing</div>
            <div class="code-name">&amp;#xe65e;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe65f;</span>
            <div class="name">qiandai</div>
            <div class="code-name">&amp;#xe65f;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe660;</span>
            <div class="name">shangpinxiangqing-fenxiang</div>
            <div class="code-name">&amp;#xe660;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe661;</span>
            <div class="name">shangpinxiangqing-jifen</div>
            <div class="code-name">&amp;#xe661;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe662;</span>
            <div class="name">shangpinxiangqing-gouwuche</div>
            <div class="code-name">&amp;#xe662;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe663;</span>
            <div class="name">shangpinxiangqing-baozhuang</div>
            <div class="code-name">&amp;#xe663;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe664;</span>
            <div class="name">shangpinxiangqing-guanbi</div>
            <div class="code-name">&amp;#xe664;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe665;</span>
            <div class="name">shangpinxiangqing-dianpu</div>
            <div class="code-name">&amp;#xe665;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe666;</span>
            <div class="name">shangpinxiangqing-kefu</div>
            <div class="code-name">&amp;#xe666;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe667;</span>
            <div class="name">shangpinxiangqing-qian</div>
            <div class="code-name">&amp;#xe667;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe668;</span>
            <div class="name">shangpinxiangqing-shixiao</div>
            <div class="code-name">&amp;#xe668;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe669;</span>
            <div class="name">tihuodianhoutai</div>
            <div class="code-name">&amp;#xe669;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe66a;</span>
            <div class="name">shezhi</div>
            <div class="code-name">&amp;#xe66a;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe66b;</span>
            <div class="name">shouhou</div>
            <div class="code-name">&amp;#xe66b;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe66c;</span>
            <div class="name">tijiaodingdan-manjian</div>
            <div class="code-name">&amp;#xe66c;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe66d;</span>
            <div class="name">shenqingchengshihehuoren</div>
            <div class="code-name">&amp;#xe66d;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe66e;</span>
            <div class="name">shenqingtuanzhang</div>
            <div class="code-name">&amp;#xe66e;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe66f;</span>
            <div class="name">tijiaodingdan-dizhi</div>
            <div class="code-name">&amp;#xe66f;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe670;</span>
            <div class="name">tijiaodingdan-haoyou</div>
            <div class="code-name">&amp;#xe670;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe671;</span>
            <div class="name">dingdanxiangqing-peisongzhong</div>
            <div class="code-name">&amp;#xe671;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe672;</span>
            <div class="name">dingdanxiangqing-yiwancheng</div>
            <div class="code-name">&amp;#xe672;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe673;</span>
            <div class="name">tijiaodingdan-gouxuan</div>
            <div class="code-name">&amp;#xe673;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe674;</span>
            <div class="name">weipingjiaxingxing</div>
            <div class="code-name">&amp;#xe674;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe675;</span>
            <div class="name">gouwuche</div>
            <div class="code-name">&amp;#xe675;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe676;</span>
            <div class="name">dingdanxiangqing-wuliu</div>
            <div class="code-name">&amp;#xe676;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe677;</span>
            <div class="name">dianhua</div>
            <div class="code-name">&amp;#xe677;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe678;</span>
            <div class="name">fenxiaogouxuan</div>
            <div class="code-name">&amp;#xe678;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe679;</span>
            <div class="name">dingdanxiangqing-daifahuo</div>
            <div class="code-name">&amp;#xe679;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe67a;</span>
            <div class="name">ziyuanruzhu</div>
            <div class="code-name">&amp;#xe67a;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe67b;</span>
            <div class="name">dingdanxiangqing-dizhi</div>
            <div class="code-name">&amp;#xe67b;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe67c;</span>
            <div class="name">fenxiaodingdan</div>
            <div class="code-name">&amp;#xe67c;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe67d;</span>
            <div class="name">daitihuo</div>
            <div class="code-name">&amp;#xe67d;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe67e;</span>
            <div class="name">bofang</div>
            <div class="code-name">&amp;#xe67e;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe67f;</span>
            <div class="name">dizhiguanli</div>
            <div class="code-name">&amp;#xe67f;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe680;</span>
            <div class="name">dingdanxiangqing-daitihuo</div>
            <div class="code-name">&amp;#xe680;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe681;</span>
            <div class="name">charutupian</div>
            <div class="code-name">&amp;#xe681;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe682;</span>
            <div class="name">gouwuche-jian</div>
            <div class="code-name">&amp;#xe682;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe683;</span>
            <div class="name">tijiaodingdan-youhuiquan-guanbi</div>
            <div class="code-name">&amp;#xe683;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe684;</span>
            <div class="name">fenxiao</div>
            <div class="code-name">&amp;#xe684;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe685;</span>
            <div class="name">fenxiaokehu</div>
            <div class="code-name">&amp;#xe685;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe686;</span>
            <div class="name">shangpinxiangqing-zuanshi</div>
            <div class="code-name">&amp;#xe686;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe687;</span>
            <div class="name">dingdanxiangqing-yiguanbi</div>
            <div class="code-name">&amp;#xe687;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe688;</span>
            <div class="name">fenxiaoma</div>
            <div class="code-name">&amp;#xe688;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe689;</span>
            <div class="name">dingdanxiangqing-daifukuan</div>
            <div class="code-name">&amp;#xe689;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe68a;</span>
            <div class="name">dingdanxiangqing-liuyan</div>
            <div class="code-name">&amp;#xe68a;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe68b;</span>
            <div class="name">dingdanxiangqing-daipingjia</div>
            <div class="code-name">&amp;#xe68b;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe68c;</span>
            <div class="name">gouwuche-jia</div>
            <div class="code-name">&amp;#xe68c;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe68d;</span>
            <div class="name">pc-pingjiaxingxing</div>
            <div class="code-name">&amp;#xe68d;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe68e;</span>
            <div class="name">gouwuche1</div>
            <div class="code-name">&amp;#xe68e;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe68f;</span>
            <div class="name">tihuodianhoutai-shouhoudingdan</div>
            <div class="code-name">&amp;#xe68f;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe690;</span>
            <div class="name">tihuodianhoutai-dingdanhexiao</div>
            <div class="code-name">&amp;#xe690;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe691;</span>
            <div class="name">tihuodianhoutai-peisongshezhi</div>
            <div class="code-name">&amp;#xe691;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe692;</span>
            <div class="name">tuanzhanggongzuotaijinbi</div>
            <div class="code-name">&amp;#xe692;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe693;</span>
            <div class="name">tihuodianhoutai-tuanzhangxinxi</div>
            <div class="code-name">&amp;#xe693;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe694;</span>
            <div class="name">tihuodianhoutai-qianshoudan</div>
            <div class="code-name">&amp;#xe694;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe695;</span>
            <div class="name">tuanzhanggongzuitai-tishi</div>
            <div class="code-name">&amp;#xe695;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe696;</span>
            <div class="name">tihuodianhoutai-yongjin</div>
            <div class="code-name">&amp;#xe696;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe697;</span>
            <div class="name">bigeguanlitai-yunxingzhong</div>
            <div class="code-name">&amp;#xe697;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe698;</span>
            <div class="name">bigeguanlitai-fuwuqi</div>
            <div class="code-name">&amp;#xe698;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe699;</span>
            <div class="name">bigeguanlitai-yiguanbi</div>
            <div class="code-name">&amp;#xe699;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe69a;</span>
            <div class="name">tihuodianhoutai-dingdanhexiao</div>
            <div class="code-name">&amp;#xe69a;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe69b;</span>
            <div class="name">bigeguanlitai-CDN</div>
            <div class="code-name">&amp;#xe69b;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe69c;</span>
            <div class="name">bigeguanlitai-jinrifangke</div>
            <div class="code-name">&amp;#xe69c;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe69d;</span>
            <div class="name">bigeguanlitai-jinridingdan</div>
            <div class="code-name">&amp;#xe69d;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe69e;</span>
            <div class="name">bigeguanlitai-jinrichengjiaoe</div>
            <div class="code-name">&amp;#xe69e;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe69f;</span>
            <div class="name">PC-tishi1</div>
            <div class="code-name">&amp;#xe69f;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a0;</span>
            <div class="name">PC-shijian</div>
            <div class="code-name">&amp;#xe6a0;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a1;</span>
            <div class="name">PC-bianji</div>
            <div class="code-name">&amp;#xe6a1;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a2;</span>
            <div class="name">PC-tishi</div>
            <div class="code-name">&amp;#xe6a2;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a3;</span>
            <div class="name">PC-beizhu</div>
            <div class="code-name">&amp;#xe6a3;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a4;</span>
            <div class="name">PC-shouhougongdan-xiangqing-cangkuchulizhong</div>
            <div class="code-name">&amp;#xe6a4;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a5;</span>
            <div class="name">PC-shouhougongdan-xiangqing-yiwancheng</div>
            <div class="code-name">&amp;#xe6a5;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a6;</span>
            <div class="name">PC-shangpinguanli-shuxingmoban-shanchu</div>
            <div class="code-name">&amp;#xe6a6;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a7;</span>
            <div class="name">PC-shouhougongdan-xiangqing-paisongzhong</div>
            <div class="code-name">&amp;#xe6a7;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a8;</span>
            <div class="name">PC-yichang</div>
            <div class="code-name">&amp;#xe6a8;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6a9;</span>
            <div class="name">tihuodianhoutai-saosao</div>
            <div class="code-name">&amp;#xe6a9;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6aa;</span>
            <div class="name">bigeguanlitai-daifukuandingdanshu</div>
            <div class="code-name">&amp;#xe6aa;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6ac;</span>
            <div class="name">tihuodianhoutai-shouhoudingdan</div>
            <div class="code-name">&amp;#xe6ac;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6ad;</span>
            <div class="name">tihuodianhoutai-tuanzhangxinxi</div>
            <div class="code-name">&amp;#xe6ad;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6ae;</span>
            <div class="name">PC-shouhougongdan-xiangqing-peisongzhong</div>
            <div class="code-name">&amp;#xe6ae;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6af;</span>
            <div class="name">tihuodianhoutai-peisongshezhi</div>
            <div class="code-name">&amp;#xe6af;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6b0;</span>
            <div class="name">shangchuanpingzheng</div>
            <div class="code-name">&amp;#xe6b0;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6b1;</span>
            <div class="name">PC-yibeizhu</div>
            <div class="code-name">&amp;#xe6b1;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6b3;</span>
            <div class="name">wodeshezhi</div>
            <div class="code-name">&amp;#xe6b3;</div>
          </li>

          <li class="dib">
            <span class="icon iconfont">&#xe6b4;</span>
            <div class="name">delete,删除,清除,清理</div>
            <div class="code-name">&amp;#xe6b4;</div>
          </li>

        </ul>
        <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
          <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
          <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
          <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
        </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">

          <li class="dib">
            <span class="icon iconfont icontianjia-fangkuang-tianchong"></span>
            <div class="name">
              添加-方框-填充
            </div>
            <div class="code-name">.icontianjia-fangkuang-tianchong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconcode"></span>
            <div class="name">
              扫码
            </div>
            <div class="code-name">.iconcode
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.iconshanchu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondaohangdizhiweizhi"></span>
            <div class="name">
              110导航、地址、位置
            </div>
            <div class="code-name">.icondaohangdizhiweizhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.iconbianji
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconweixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.iconweixin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconjiechubangding"></span>
            <div class="name">
              解除绑定
            </div>
            <div class="code-name">.iconjiechubangding
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondizhi"></span>
            <div class="name">
              地址
            </div>
            <div class="code-name">.icondizhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icongerenzhongxin-dizhiguanli"></span>
            <div class="name">
              个人中心-地址管理
            </div>
            <div class="code-name">.icongerenzhongxin-dizhiguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontijiaodingdan-youhuiquan"></span>
            <div class="name">
              tijiaodingdan-youhuiquan
            </div>
            <div class="code-name">.icontijiaodingdan-youhuiquan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontijiaodingdan-weixin"></span>
            <div class="name">
              tijiaodingdan-weixin
            </div>
            <div class="code-name">.icontijiaodingdan-weixin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconweigouxuan"></span>
            <div class="name">
              weigouxuan
            </div>
            <div class="code-name">.iconweigouxuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontijiaodingdan-yue"></span>
            <div class="name">
              tijiaodingdan-yu e
            </div>
            <div class="code-name">.icontijiaodingdan-yue
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontuanzhanggongzuotai"></span>
            <div class="name">
              tuanzhanggongzuotai
            </div>
            <div class="code-name">.icontuanzhanggongzuotai
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondaijiesuanyongjin"></span>
            <div class="name">
              daijiesuanyongjin
            </div>
            <div class="code-name">.icondaijiesuanyongjin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondaifukuan"></span>
            <div class="name">
              daifukuan
            </div>
            <div class="code-name">.icondaifukuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconwodeyouhuiquan"></span>
            <div class="name">
              wodeyouhuiquan
            </div>
            <div class="code-name">.iconwodeyouhuiquan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconwodekefu"></span>
            <div class="name">
              wodekefu
            </div>
            <div class="code-name">.iconwodekefu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontuanzhangxinxi"></span>
            <div class="name">
              tuanzhangxinxi
            </div>
            <div class="code-name">.icontuanzhangxinxi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icongouxuan"></span>
            <div class="name">
              gouxuan
            </div>
            <div class="code-name">.icongouxuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconjifen"></span>
            <div class="name">
              jifen
            </div>
            <div class="code-name">.iconjifen
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icongouwuche-shanchu"></span>
            <div class="name">
              gouwuche-shanchu
            </div>
            <div class="code-name">.icongouwuche-shanchu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconhuiyuan"></span>
            <div class="name">
              huiyuan
            </div>
            <div class="code-name">.iconhuiyuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconkefu"></span>
            <div class="name">
              kefu
            </div>
            <div class="code-name">.iconkefu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconjuxing"></span>
            <div class="name">
              juxing
            </div>
            <div class="code-name">.iconjuxing
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconlingquanzhongxin"></span>
            <div class="name">
              lingquanzhongxin
            </div>
            <div class="code-name">.iconlingquanzhongxin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconliebiao"></span>
            <div class="name">
              liebiao
            </div>
            <div class="code-name">.iconliebiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconpingjiazhongxin"></span>
            <div class="name">
              pingjiazhongxin
            </div>
            <div class="code-name">.iconpingjiazhongxin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconpeisongzhong"></span>
            <div class="name">
              peisongzhong
            </div>
            <div class="code-name">.iconpeisongzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconpingjiaxingxing"></span>
            <div class="name">
              pingjiaxingxing
            </div>
            <div class="code-name">.iconpingjiaxingxing
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconqiandai"></span>
            <div class="name">
              qiandai
            </div>
            <div class="code-name">.iconqiandai
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-fenxiang"></span>
            <div class="name">
              shangpinxiangqing-fenxiang
            </div>
            <div class="code-name">.iconshangpinxiangqing-fenxiang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-jifen"></span>
            <div class="name">
              shangpinxiangqing-jifen
            </div>
            <div class="code-name">.iconshangpinxiangqing-jifen
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-gouwuche"></span>
            <div class="name">
              shangpinxiangqing-gouwuche
            </div>
            <div class="code-name">.iconshangpinxiangqing-gouwuche
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-baozhuang"></span>
            <div class="name">
              shangpinxiangqing-baozhuang
            </div>
            <div class="code-name">.iconshangpinxiangqing-baozhuang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-guanbi"></span>
            <div class="name">
              shangpinxiangqing-guanbi
            </div>
            <div class="code-name">.iconshangpinxiangqing-guanbi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-dianpu"></span>
            <div class="name">
              shangpinxiangqing-dianpu
            </div>
            <div class="code-name">.iconshangpinxiangqing-dianpu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-kefu"></span>
            <div class="name">
              shangpinxiangqing-kefu
            </div>
            <div class="code-name">.iconshangpinxiangqing-kefu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-qian"></span>
            <div class="name">
              shangpinxiangqing-qian
            </div>
            <div class="code-name">.iconshangpinxiangqing-qian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-shixiao"></span>
            <div class="name">
              shangpinxiangqing-shixiao
            </div>
            <div class="code-name">.iconshangpinxiangqing-shixiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai"></span>
            <div class="name">
              tihuodianhoutai
            </div>
            <div class="code-name">.icontihuodianhoutai
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshezhi"></span>
            <div class="name">
              shezhi
            </div>
            <div class="code-name">.iconshezhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshouhou"></span>
            <div class="name">
              shouhou
            </div>
            <div class="code-name">.iconshouhou
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontijiaodingdan-manjian"></span>
            <div class="name">
              tijiaodingdan-manjian
            </div>
            <div class="code-name">.icontijiaodingdan-manjian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshenqingchengshihehuoren"></span>
            <div class="name">
              shenqingchengshihehuoren
            </div>
            <div class="code-name">.iconshenqingchengshihehuoren
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshenqingtuanzhang"></span>
            <div class="name">
              shenqingtuanzhang
            </div>
            <div class="code-name">.iconshenqingtuanzhang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontijiaodingdan-dizhi"></span>
            <div class="name">
              tijiaodingdan-dizhi
            </div>
            <div class="code-name">.icontijiaodingdan-dizhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontijiaodingdan-haoyou"></span>
            <div class="name">
              tijiaodingdan-haoyou
            </div>
            <div class="code-name">.icontijiaodingdan-haoyou
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-peisongzhong"></span>
            <div class="name">
              dingdanxiangqing-peisongzhong
            </div>
            <div class="code-name">.icondingdanxiangqing-peisongzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-yiwancheng"></span>
            <div class="name">
              dingdanxiangqing-yiwancheng
            </div>
            <div class="code-name">.icondingdanxiangqing-yiwancheng
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontijiaodingdan-gouxuan"></span>
            <div class="name">
              tijiaodingdan-gouxuan
            </div>
            <div class="code-name">.icontijiaodingdan-gouxuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconweipingjiaxingxing"></span>
            <div class="name">
              weipingjiaxingxing
            </div>
            <div class="code-name">.iconweipingjiaxingxing
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icongouwuche"></span>
            <div class="name">
              gouwuche
            </div>
            <div class="code-name">.icongouwuche
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-wuliu"></span>
            <div class="name">
              dingdanxiangqing-wuliu
            </div>
            <div class="code-name">.icondingdanxiangqing-wuliu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondianhua"></span>
            <div class="name">
              dianhua
            </div>
            <div class="code-name">.icondianhua
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconfenxiaogouxuan"></span>
            <div class="name">
              fenxiaogouxuan
            </div>
            <div class="code-name">.iconfenxiaogouxuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-daifahuo"></span>
            <div class="name">
              dingdanxiangqing-daifahuo
            </div>
            <div class="code-name">.icondingdanxiangqing-daifahuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconziyuanruzhu"></span>
            <div class="name">
              ziyuanruzhu
            </div>
            <div class="code-name">.iconziyuanruzhu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-dizhi"></span>
            <div class="name">
              dingdanxiangqing-dizhi
            </div>
            <div class="code-name">.icondingdanxiangqing-dizhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconfenxiaodingdan"></span>
            <div class="name">
              fenxiaodingdan
            </div>
            <div class="code-name">.iconfenxiaodingdan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondaitihuo"></span>
            <div class="name">
              daitihuo
            </div>
            <div class="code-name">.icondaitihuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbofang"></span>
            <div class="name">
              bofang
            </div>
            <div class="code-name">.iconbofang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondizhiguanli"></span>
            <div class="name">
              dizhiguanli
            </div>
            <div class="code-name">.icondizhiguanli
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-daitihuo"></span>
            <div class="name">
              dingdanxiangqing-daitihuo
            </div>
            <div class="code-name">.icondingdanxiangqing-daitihuo
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconcharutupian"></span>
            <div class="name">
              charutupian
            </div>
            <div class="code-name">.iconcharutupian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icongouwuche-jian"></span>
            <div class="name">
              gouwuche-jian
            </div>
            <div class="code-name">.icongouwuche-jian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontijiaodingdan-youhuiquan-guanbi"></span>
            <div class="name">
              tijiaodingdan-youhuiquan-guanbi
            </div>
            <div class="code-name">.icontijiaodingdan-youhuiquan-guanbi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconfenxiao"></span>
            <div class="name">
              fenxiao
            </div>
            <div class="code-name">.iconfenxiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconfenxiaokehu"></span>
            <div class="name">
              fenxiaokehu
            </div>
            <div class="code-name">.iconfenxiaokehu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangpinxiangqing-zuanshi"></span>
            <div class="name">
              shangpinxiangqing-zuanshi
            </div>
            <div class="code-name">.iconshangpinxiangqing-zuanshi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-yiguanbi"></span>
            <div class="name">
              dingdanxiangqing-yiguanbi
            </div>
            <div class="code-name">.icondingdanxiangqing-yiguanbi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconfenxiaoma"></span>
            <div class="name">
              fenxiaoma
            </div>
            <div class="code-name">.iconfenxiaoma
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-daifukuan"></span>
            <div class="name">
              dingdanxiangqing-daifukuan
            </div>
            <div class="code-name">.icondingdanxiangqing-daifukuan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-liuyan"></span>
            <div class="name">
              dingdanxiangqing-liuyan
            </div>
            <div class="code-name">.icondingdanxiangqing-liuyan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondingdanxiangqing-daipingjia"></span>
            <div class="name">
              dingdanxiangqing-daipingjia
            </div>
            <div class="code-name">.icondingdanxiangqing-daipingjia
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icongouwuche-jia"></span>
            <div class="name">
              gouwuche-jia
            </div>
            <div class="code-name">.icongouwuche-jia
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconpc-pingjiaxingxing"></span>
            <div class="name">
              pc-pingjiaxingxing
            </div>
            <div class="code-name">.iconpc-pingjiaxingxing
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icongouwuche1"></span>
            <div class="name">
              gouwuche1
            </div>
            <div class="code-name">.icongouwuche1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-shouhoudingdan"></span>
            <div class="name">
              tihuodianhoutai-shouhoudingdan
            </div>
            <div class="code-name">.icontihuodianhoutai-shouhoudingdan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-dingdanhexiao"></span>
            <div class="name">
              tihuodianhoutai-dingdanhexiao
            </div>
            <div class="code-name">.icontihuodianhoutai-dingdanhexiao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-peisongshezhi"></span>
            <div class="name">
              tihuodianhoutai-peisongshezhi
            </div>
            <div class="code-name">.icontihuodianhoutai-peisongshezhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontuanzhanggongzuotaijinbi"></span>
            <div class="name">
              tuanzhanggongzuotaijinbi
            </div>
            <div class="code-name">.icontuanzhanggongzuotaijinbi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-tuanzhangxinxi"></span>
            <div class="name">
              tihuodianhoutai-tuanzhangxinxi
            </div>
            <div class="code-name">.icontihuodianhoutai-tuanzhangxinxi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-qianshoudan"></span>
            <div class="name">
              tihuodianhoutai-qianshoudan
            </div>
            <div class="code-name">.icontihuodianhoutai-qianshoudan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontuanzhanggongzuitai-tishi"></span>
            <div class="name">
              tuanzhanggongzuitai-tishi
            </div>
            <div class="code-name">.icontuanzhanggongzuitai-tishi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-yongjin"></span>
            <div class="name">
              tihuodianhoutai-yongjin
            </div>
            <div class="code-name">.icontihuodianhoutai-yongjin
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbigeguanlitai-yunxingzhong"></span>
            <div class="name">
              bigeguanlitai-yunxingzhong
            </div>
            <div class="code-name">.iconbigeguanlitai-yunxingzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbigeguanlitai-fuwuqi"></span>
            <div class="name">
              bigeguanlitai-fuwuqi
            </div>
            <div class="code-name">.iconbigeguanlitai-fuwuqi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbigeguanlitai-yiguanbi"></span>
            <div class="name">
              bigeguanlitai-yiguanbi
            </div>
            <div class="code-name">.iconbigeguanlitai-yiguanbi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-dingdanhexiao1"></span>
            <div class="name">
              tihuodianhoutai-dingdanhexiao
            </div>
            <div class="code-name">.icontihuodianhoutai-dingdanhexiao1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbigeguanlitai-CDN"></span>
            <div class="name">
              bigeguanlitai-CDN
            </div>
            <div class="code-name">.iconbigeguanlitai-CDN
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbigeguanlitai-jinrifangke"></span>
            <div class="name">
              bigeguanlitai-jinrifangke
            </div>
            <div class="code-name">.iconbigeguanlitai-jinrifangke
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbigeguanlitai-jinridingdan"></span>
            <div class="name">
              bigeguanlitai-jinridingdan
            </div>
            <div class="code-name">.iconbigeguanlitai-jinridingdan
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbigeguanlitai-jinrichengjiaoe"></span>
            <div class="name">
              bigeguanlitai-jinrichengjiaoe
            </div>
            <div class="code-name">.iconbigeguanlitai-jinrichengjiaoe
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-tishi"></span>
            <div class="name">
              PC-tishi1
            </div>
            <div class="code-name">.iconPC-tishi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-shijian"></span>
            <div class="name">
              PC-shijian
            </div>
            <div class="code-name">.iconPC-shijian
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-bianji"></span>
            <div class="name">
              PC-bianji
            </div>
            <div class="code-name">.iconPC-bianji
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-tishi1"></span>
            <div class="name">
              PC-tishi
            </div>
            <div class="code-name">.iconPC-tishi1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-beizhu"></span>
            <div class="name">
              PC-beizhu
            </div>
            <div class="code-name">.iconPC-beizhu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-shouhougongdan-xiangqing-cangkuchulizhong"></span>
            <div class="name">
              PC-shouhougongdan-xiangqing-cangkuchulizhong
            </div>
            <div class="code-name">.iconPC-shouhougongdan-xiangqing-cangkuchulizhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-shouhougongdan-xiangqing-yiwancheng"></span>
            <div class="name">
              PC-shouhougongdan-xiangqing-yiwancheng
            </div>
            <div class="code-name">.iconPC-shouhougongdan-xiangqing-yiwancheng
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-shangpinguanli-shuxingmoban-shanchu"></span>
            <div class="name">
              PC-shangpinguanli-shuxingmoban-shanchu
            </div>
            <div class="code-name">.iconPC-shangpinguanli-shuxingmoban-shanchu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-shouhougongdan-xiangqing-paisongzhong"></span>
            <div class="name">
              PC-shouhougongdan-xiangqing-paisongzhong
            </div>
            <div class="code-name">.iconPC-shouhougongdan-xiangqing-paisongzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-yichang"></span>
            <div class="name">
              PC-yichang
            </div>
            <div class="code-name">.iconPC-yichang
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-saosao"></span>
            <div class="name">
              tihuodianhoutai-saosao
            </div>
            <div class="code-name">.icontihuodianhoutai-saosao
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconbigeguanlitai-daifukuandingdanshu"></span>
            <div class="name">
              bigeguanlitai-daifukuandingdanshu
            </div>
            <div class="code-name">.iconbigeguanlitai-daifukuandingdanshu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-shouhoudingdan1"></span>
            <div class="name">
              tihuodianhoutai-shouhoudingdan
            </div>
            <div class="code-name">.icontihuodianhoutai-shouhoudingdan1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-tuanzhangxinxi1"></span>
            <div class="name">
              tihuodianhoutai-tuanzhangxinxi
            </div>
            <div class="code-name">.icontihuodianhoutai-tuanzhangxinxi1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-shouhougongdan-xiangqing-peisongzhong"></span>
            <div class="name">
              PC-shouhougongdan-xiangqing-peisongzhong
            </div>
            <div class="code-name">.iconPC-shouhougongdan-xiangqing-peisongzhong
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icontihuodianhoutai-peisongshezhi1"></span>
            <div class="name">
              tihuodianhoutai-peisongshezhi
            </div>
            <div class="code-name">.icontihuodianhoutai-peisongshezhi1
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconshangchuanpingzheng"></span>
            <div class="name">
              shangchuanpingzheng
            </div>
            <div class="code-name">.iconshangchuanpingzheng
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconPC-yibeizhu"></span>
            <div class="name">
              PC-yibeizhu
            </div>
            <div class="code-name">.iconPC-yibeizhu
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont iconwodeshezhi"></span>
            <div class="name">
              wodeshezhi
            </div>
            <div class="code-name">.iconwodeshezhi
            </div>
          </li>

          <li class="dib">
            <span class="icon iconfont icondelete"></span>
            <div class="name">
              delete,删除,清除,清理
            </div>
            <div class="code-name">.icondelete
            </div>
          </li>

        </ul>
        <div class="article markdown">
          <h2 id="font-class-">font-class 引用</h2>
          <hr>

          <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
          <p>与 Unicode 使用方式相比，具有如下特点：</p>
          <ul>
            <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
            <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
            <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
            <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
          <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
          <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
          <pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"
              iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
        </div>
      </div>
      <div class="content symbol">
        <ul class="icon_lists dib-box">

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontianjia-fangkuang-tianchong"></use>
            </svg>
            <div class="name">添加-方框-填充</div>
            <div class="code-name">#icontianjia-fangkuang-tianchong</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconcode"></use>
            </svg>
            <div class="name">扫码</div>
            <div class="code-name">#iconcode</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshanchu"></use>
            </svg>
            <div class="name">删除</div>
            <div class="code-name">#iconshanchu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondaohangdizhiweizhi"></use>
            </svg>
            <div class="name">110导航、地址、位置</div>
            <div class="code-name">#icondaohangdizhiweizhi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbianji"></use>
            </svg>
            <div class="name">编辑</div>
            <div class="code-name">#iconbianji</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconweixin"></use>
            </svg>
            <div class="name">微信</div>
            <div class="code-name">#iconweixin</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconjiechubangding"></use>
            </svg>
            <div class="name">解除绑定</div>
            <div class="code-name">#iconjiechubangding</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondizhi"></use>
            </svg>
            <div class="name">地址</div>
            <div class="code-name">#icondizhi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icongerenzhongxin-dizhiguanli"></use>
            </svg>
            <div class="name">个人中心-地址管理</div>
            <div class="code-name">#icongerenzhongxin-dizhiguanli</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontijiaodingdan-youhuiquan"></use>
            </svg>
            <div class="name">tijiaodingdan-youhuiquan</div>
            <div class="code-name">#icontijiaodingdan-youhuiquan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontijiaodingdan-weixin"></use>
            </svg>
            <div class="name">tijiaodingdan-weixin</div>
            <div class="code-name">#icontijiaodingdan-weixin</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconweigouxuan"></use>
            </svg>
            <div class="name">weigouxuan</div>
            <div class="code-name">#iconweigouxuan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontijiaodingdan-yue"></use>
            </svg>
            <div class="name">tijiaodingdan-yu e</div>
            <div class="code-name">#icontijiaodingdan-yue</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontuanzhanggongzuotai"></use>
            </svg>
            <div class="name">tuanzhanggongzuotai</div>
            <div class="code-name">#icontuanzhanggongzuotai</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondaijiesuanyongjin"></use>
            </svg>
            <div class="name">daijiesuanyongjin</div>
            <div class="code-name">#icondaijiesuanyongjin</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondaifukuan"></use>
            </svg>
            <div class="name">daifukuan</div>
            <div class="code-name">#icondaifukuan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconwodeyouhuiquan"></use>
            </svg>
            <div class="name">wodeyouhuiquan</div>
            <div class="code-name">#iconwodeyouhuiquan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconwodekefu"></use>
            </svg>
            <div class="name">wodekefu</div>
            <div class="code-name">#iconwodekefu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontuanzhangxinxi"></use>
            </svg>
            <div class="name">tuanzhangxinxi</div>
            <div class="code-name">#icontuanzhangxinxi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icongouxuan"></use>
            </svg>
            <div class="name">gouxuan</div>
            <div class="code-name">#icongouxuan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconjifen"></use>
            </svg>
            <div class="name">jifen</div>
            <div class="code-name">#iconjifen</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icongouwuche-shanchu"></use>
            </svg>
            <div class="name">gouwuche-shanchu</div>
            <div class="code-name">#icongouwuche-shanchu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconhuiyuan"></use>
            </svg>
            <div class="name">huiyuan</div>
            <div class="code-name">#iconhuiyuan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconkefu"></use>
            </svg>
            <div class="name">kefu</div>
            <div class="code-name">#iconkefu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconjuxing"></use>
            </svg>
            <div class="name">juxing</div>
            <div class="code-name">#iconjuxing</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconlingquanzhongxin"></use>
            </svg>
            <div class="name">lingquanzhongxin</div>
            <div class="code-name">#iconlingquanzhongxin</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconliebiao"></use>
            </svg>
            <div class="name">liebiao</div>
            <div class="code-name">#iconliebiao</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconpingjiazhongxin"></use>
            </svg>
            <div class="name">pingjiazhongxin</div>
            <div class="code-name">#iconpingjiazhongxin</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconpeisongzhong"></use>
            </svg>
            <div class="name">peisongzhong</div>
            <div class="code-name">#iconpeisongzhong</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconpingjiaxingxing"></use>
            </svg>
            <div class="name">pingjiaxingxing</div>
            <div class="code-name">#iconpingjiaxingxing</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconqiandai"></use>
            </svg>
            <div class="name">qiandai</div>
            <div class="code-name">#iconqiandai</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-fenxiang"></use>
            </svg>
            <div class="name">shangpinxiangqing-fenxiang</div>
            <div class="code-name">#iconshangpinxiangqing-fenxiang</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-jifen"></use>
            </svg>
            <div class="name">shangpinxiangqing-jifen</div>
            <div class="code-name">#iconshangpinxiangqing-jifen</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-gouwuche"></use>
            </svg>
            <div class="name">shangpinxiangqing-gouwuche</div>
            <div class="code-name">#iconshangpinxiangqing-gouwuche</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-baozhuang"></use>
            </svg>
            <div class="name">shangpinxiangqing-baozhuang</div>
            <div class="code-name">#iconshangpinxiangqing-baozhuang</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-guanbi"></use>
            </svg>
            <div class="name">shangpinxiangqing-guanbi</div>
            <div class="code-name">#iconshangpinxiangqing-guanbi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-dianpu"></use>
            </svg>
            <div class="name">shangpinxiangqing-dianpu</div>
            <div class="code-name">#iconshangpinxiangqing-dianpu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-kefu"></use>
            </svg>
            <div class="name">shangpinxiangqing-kefu</div>
            <div class="code-name">#iconshangpinxiangqing-kefu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-qian"></use>
            </svg>
            <div class="name">shangpinxiangqing-qian</div>
            <div class="code-name">#iconshangpinxiangqing-qian</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-shixiao"></use>
            </svg>
            <div class="name">shangpinxiangqing-shixiao</div>
            <div class="code-name">#iconshangpinxiangqing-shixiao</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai"></use>
            </svg>
            <div class="name">tihuodianhoutai</div>
            <div class="code-name">#icontihuodianhoutai</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshezhi"></use>
            </svg>
            <div class="name">shezhi</div>
            <div class="code-name">#iconshezhi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshouhou"></use>
            </svg>
            <div class="name">shouhou</div>
            <div class="code-name">#iconshouhou</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontijiaodingdan-manjian"></use>
            </svg>
            <div class="name">tijiaodingdan-manjian</div>
            <div class="code-name">#icontijiaodingdan-manjian</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshenqingchengshihehuoren"></use>
            </svg>
            <div class="name">shenqingchengshihehuoren</div>
            <div class="code-name">#iconshenqingchengshihehuoren</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshenqingtuanzhang"></use>
            </svg>
            <div class="name">shenqingtuanzhang</div>
            <div class="code-name">#iconshenqingtuanzhang</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontijiaodingdan-dizhi"></use>
            </svg>
            <div class="name">tijiaodingdan-dizhi</div>
            <div class="code-name">#icontijiaodingdan-dizhi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontijiaodingdan-haoyou"></use>
            </svg>
            <div class="name">tijiaodingdan-haoyou</div>
            <div class="code-name">#icontijiaodingdan-haoyou</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-peisongzhong"></use>
            </svg>
            <div class="name">dingdanxiangqing-peisongzhong</div>
            <div class="code-name">#icondingdanxiangqing-peisongzhong</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-yiwancheng"></use>
            </svg>
            <div class="name">dingdanxiangqing-yiwancheng</div>
            <div class="code-name">#icondingdanxiangqing-yiwancheng</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontijiaodingdan-gouxuan"></use>
            </svg>
            <div class="name">tijiaodingdan-gouxuan</div>
            <div class="code-name">#icontijiaodingdan-gouxuan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconweipingjiaxingxing"></use>
            </svg>
            <div class="name">weipingjiaxingxing</div>
            <div class="code-name">#iconweipingjiaxingxing</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icongouwuche"></use>
            </svg>
            <div class="name">gouwuche</div>
            <div class="code-name">#icongouwuche</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-wuliu"></use>
            </svg>
            <div class="name">dingdanxiangqing-wuliu</div>
            <div class="code-name">#icondingdanxiangqing-wuliu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondianhua"></use>
            </svg>
            <div class="name">dianhua</div>
            <div class="code-name">#icondianhua</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconfenxiaogouxuan"></use>
            </svg>
            <div class="name">fenxiaogouxuan</div>
            <div class="code-name">#iconfenxiaogouxuan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-daifahuo"></use>
            </svg>
            <div class="name">dingdanxiangqing-daifahuo</div>
            <div class="code-name">#icondingdanxiangqing-daifahuo</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconziyuanruzhu"></use>
            </svg>
            <div class="name">ziyuanruzhu</div>
            <div class="code-name">#iconziyuanruzhu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-dizhi"></use>
            </svg>
            <div class="name">dingdanxiangqing-dizhi</div>
            <div class="code-name">#icondingdanxiangqing-dizhi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconfenxiaodingdan"></use>
            </svg>
            <div class="name">fenxiaodingdan</div>
            <div class="code-name">#iconfenxiaodingdan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondaitihuo"></use>
            </svg>
            <div class="name">daitihuo</div>
            <div class="code-name">#icondaitihuo</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbofang"></use>
            </svg>
            <div class="name">bofang</div>
            <div class="code-name">#iconbofang</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondizhiguanli"></use>
            </svg>
            <div class="name">dizhiguanli</div>
            <div class="code-name">#icondizhiguanli</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-daitihuo"></use>
            </svg>
            <div class="name">dingdanxiangqing-daitihuo</div>
            <div class="code-name">#icondingdanxiangqing-daitihuo</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconcharutupian"></use>
            </svg>
            <div class="name">charutupian</div>
            <div class="code-name">#iconcharutupian</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icongouwuche-jian"></use>
            </svg>
            <div class="name">gouwuche-jian</div>
            <div class="code-name">#icongouwuche-jian</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontijiaodingdan-youhuiquan-guanbi"></use>
            </svg>
            <div class="name">tijiaodingdan-youhuiquan-guanbi</div>
            <div class="code-name">#icontijiaodingdan-youhuiquan-guanbi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconfenxiao"></use>
            </svg>
            <div class="name">fenxiao</div>
            <div class="code-name">#iconfenxiao</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconfenxiaokehu"></use>
            </svg>
            <div class="name">fenxiaokehu</div>
            <div class="code-name">#iconfenxiaokehu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangpinxiangqing-zuanshi"></use>
            </svg>
            <div class="name">shangpinxiangqing-zuanshi</div>
            <div class="code-name">#iconshangpinxiangqing-zuanshi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-yiguanbi"></use>
            </svg>
            <div class="name">dingdanxiangqing-yiguanbi</div>
            <div class="code-name">#icondingdanxiangqing-yiguanbi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconfenxiaoma"></use>
            </svg>
            <div class="name">fenxiaoma</div>
            <div class="code-name">#iconfenxiaoma</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-daifukuan"></use>
            </svg>
            <div class="name">dingdanxiangqing-daifukuan</div>
            <div class="code-name">#icondingdanxiangqing-daifukuan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-liuyan"></use>
            </svg>
            <div class="name">dingdanxiangqing-liuyan</div>
            <div class="code-name">#icondingdanxiangqing-liuyan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondingdanxiangqing-daipingjia"></use>
            </svg>
            <div class="name">dingdanxiangqing-daipingjia</div>
            <div class="code-name">#icondingdanxiangqing-daipingjia</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icongouwuche-jia"></use>
            </svg>
            <div class="name">gouwuche-jia</div>
            <div class="code-name">#icongouwuche-jia</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconpc-pingjiaxingxing"></use>
            </svg>
            <div class="name">pc-pingjiaxingxing</div>
            <div class="code-name">#iconpc-pingjiaxingxing</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icongouwuche1"></use>
            </svg>
            <div class="name">gouwuche1</div>
            <div class="code-name">#icongouwuche1</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-shouhoudingdan"></use>
            </svg>
            <div class="name">tihuodianhoutai-shouhoudingdan</div>
            <div class="code-name">#icontihuodianhoutai-shouhoudingdan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-dingdanhexiao"></use>
            </svg>
            <div class="name">tihuodianhoutai-dingdanhexiao</div>
            <div class="code-name">#icontihuodianhoutai-dingdanhexiao</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-peisongshezhi"></use>
            </svg>
            <div class="name">tihuodianhoutai-peisongshezhi</div>
            <div class="code-name">#icontihuodianhoutai-peisongshezhi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontuanzhanggongzuotaijinbi"></use>
            </svg>
            <div class="name">tuanzhanggongzuotaijinbi</div>
            <div class="code-name">#icontuanzhanggongzuotaijinbi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-tuanzhangxinxi"></use>
            </svg>
            <div class="name">tihuodianhoutai-tuanzhangxinxi</div>
            <div class="code-name">#icontihuodianhoutai-tuanzhangxinxi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-qianshoudan"></use>
            </svg>
            <div class="name">tihuodianhoutai-qianshoudan</div>
            <div class="code-name">#icontihuodianhoutai-qianshoudan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontuanzhanggongzuitai-tishi"></use>
            </svg>
            <div class="name">tuanzhanggongzuitai-tishi</div>
            <div class="code-name">#icontuanzhanggongzuitai-tishi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-yongjin"></use>
            </svg>
            <div class="name">tihuodianhoutai-yongjin</div>
            <div class="code-name">#icontihuodianhoutai-yongjin</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbigeguanlitai-yunxingzhong"></use>
            </svg>
            <div class="name">bigeguanlitai-yunxingzhong</div>
            <div class="code-name">#iconbigeguanlitai-yunxingzhong</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbigeguanlitai-fuwuqi"></use>
            </svg>
            <div class="name">bigeguanlitai-fuwuqi</div>
            <div class="code-name">#iconbigeguanlitai-fuwuqi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbigeguanlitai-yiguanbi"></use>
            </svg>
            <div class="name">bigeguanlitai-yiguanbi</div>
            <div class="code-name">#iconbigeguanlitai-yiguanbi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-dingdanhexiao1"></use>
            </svg>
            <div class="name">tihuodianhoutai-dingdanhexiao</div>
            <div class="code-name">#icontihuodianhoutai-dingdanhexiao1</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbigeguanlitai-CDN"></use>
            </svg>
            <div class="name">bigeguanlitai-CDN</div>
            <div class="code-name">#iconbigeguanlitai-CDN</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbigeguanlitai-jinrifangke"></use>
            </svg>
            <div class="name">bigeguanlitai-jinrifangke</div>
            <div class="code-name">#iconbigeguanlitai-jinrifangke</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbigeguanlitai-jinridingdan"></use>
            </svg>
            <div class="name">bigeguanlitai-jinridingdan</div>
            <div class="code-name">#iconbigeguanlitai-jinridingdan</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbigeguanlitai-jinrichengjiaoe"></use>
            </svg>
            <div class="name">bigeguanlitai-jinrichengjiaoe</div>
            <div class="code-name">#iconbigeguanlitai-jinrichengjiaoe</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-tishi"></use>
            </svg>
            <div class="name">PC-tishi1</div>
            <div class="code-name">#iconPC-tishi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-shijian"></use>
            </svg>
            <div class="name">PC-shijian</div>
            <div class="code-name">#iconPC-shijian</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-bianji"></use>
            </svg>
            <div class="name">PC-bianji</div>
            <div class="code-name">#iconPC-bianji</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-tishi1"></use>
            </svg>
            <div class="name">PC-tishi</div>
            <div class="code-name">#iconPC-tishi1</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-beizhu"></use>
            </svg>
            <div class="name">PC-beizhu</div>
            <div class="code-name">#iconPC-beizhu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-shouhougongdan-xiangqing-cangkuchulizhong"></use>
            </svg>
            <div class="name">PC-shouhougongdan-xiangqing-cangkuchulizhong</div>
            <div class="code-name">#iconPC-shouhougongdan-xiangqing-cangkuchulizhong</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-shouhougongdan-xiangqing-yiwancheng"></use>
            </svg>
            <div class="name">PC-shouhougongdan-xiangqing-yiwancheng</div>
            <div class="code-name">#iconPC-shouhougongdan-xiangqing-yiwancheng</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-shangpinguanli-shuxingmoban-shanchu"></use>
            </svg>
            <div class="name">PC-shangpinguanli-shuxingmoban-shanchu</div>
            <div class="code-name">#iconPC-shangpinguanli-shuxingmoban-shanchu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-shouhougongdan-xiangqing-paisongzhong"></use>
            </svg>
            <div class="name">PC-shouhougongdan-xiangqing-paisongzhong</div>
            <div class="code-name">#iconPC-shouhougongdan-xiangqing-paisongzhong</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-yichang"></use>
            </svg>
            <div class="name">PC-yichang</div>
            <div class="code-name">#iconPC-yichang</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-saosao"></use>
            </svg>
            <div class="name">tihuodianhoutai-saosao</div>
            <div class="code-name">#icontihuodianhoutai-saosao</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconbigeguanlitai-daifukuandingdanshu"></use>
            </svg>
            <div class="name">bigeguanlitai-daifukuandingdanshu</div>
            <div class="code-name">#iconbigeguanlitai-daifukuandingdanshu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-shouhoudingdan1"></use>
            </svg>
            <div class="name">tihuodianhoutai-shouhoudingdan</div>
            <div class="code-name">#icontihuodianhoutai-shouhoudingdan1</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-tuanzhangxinxi1"></use>
            </svg>
            <div class="name">tihuodianhoutai-tuanzhangxinxi</div>
            <div class="code-name">#icontihuodianhoutai-tuanzhangxinxi1</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-shouhougongdan-xiangqing-peisongzhong"></use>
            </svg>
            <div class="name">PC-shouhougongdan-xiangqing-peisongzhong</div>
            <div class="code-name">#iconPC-shouhougongdan-xiangqing-peisongzhong</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icontihuodianhoutai-peisongshezhi1"></use>
            </svg>
            <div class="name">tihuodianhoutai-peisongshezhi</div>
            <div class="code-name">#icontihuodianhoutai-peisongshezhi1</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconshangchuanpingzheng"></use>
            </svg>
            <div class="name">shangchuanpingzheng</div>
            <div class="code-name">#iconshangchuanpingzheng</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconPC-yibeizhu"></use>
            </svg>
            <div class="name">PC-yibeizhu</div>
            <div class="code-name">#iconPC-yibeizhu</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#iconwodeshezhi"></use>
            </svg>
            <div class="name">wodeshezhi</div>
            <div class="code-name">#iconwodeshezhi</div>
          </li>

          <li class="dib">
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icondelete"></use>
            </svg>
            <div class="name">delete,删除,清除,清理</div>
            <div class="code-name">#icondelete</div>
          </li>

        </ul>
        <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
          <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
          <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
          <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
        </div>
      </div>

    </div>
  </div>
  <script>
    $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>

</html>